<template>
  <view>
    <!-- 选择收货地址-->

    <view v-if="addressdata" class="" style="background-color: white;padding-top: 20px;padding-bottom: 20px;">
      <view class="" style="padding-left: 15px;">
        <view class="" style="display: flex;justify-content: space-between;text-overflow: ellipsis;" @click="selects">
          <view class="" style="">
            <text style="font-size: 14px;">{{addressdata.label}}</text>
          </view>
          <view class="" style="position: absolute;margin-left: 12%;">
            <text
              style="overflow: hidden;text-overflow: ellipsis; white-space: nowrap; font-weight:600;font-size: 14px;">{{addressdata.provinceName}}{{addressdata.cityName}}{{addressdata.districtName}}{{addressdata.detail}}</text>
          </view>

          <view class="" style="width: 30px;">
            <uni-icons color="#b5b5b5" type="right" size="13" style=""></uni-icons>
          </view>
        </view>

        <view style="padding-top: 10px;padding-bottom: 10px;">
          <view class="" style="font-size: 13px;">
            <text style="padding-right: 5px;">{{addressdata.consignee}}</text>
            <text>{{addressdata.phone}}</text>
            <view class="" style="padding-top: 5px;">
              <text style="color: #f19500;font-size: 12px;">为减少接触，降低风险，推荐使用无 接触配送</text>
            </view>

          </view>
        </view>

        <view :class="[ active === 1 ? 'active' : 'send'] " @click="Active" style="">
          <text style="font-size: 12px;padding: 5px;">立即配送</text>

          <view class="" style="">
            <!-- color: #f19500; -->
            <text style=" font-size: 12px;">预计{{time}}送达 </text>
            <uni-icons color="#b5b5b5" type="right" size="13"></uni-icons>
          </view>

        </view>


        <view :class="[ appointment_time === '' ? 'time':'times']" @click="timesend" style="">
          <text style="font-size: 12px;padding: 5px;">预约配送</text>



          <view style="font-size: 12px;display: flex;align-items: center;">
            <view class="" v-if="appointment_time" style="display: flex;">
              <text style=" font-size: 12px;line-height: 30px;">预计{{appointment_time}}送达 </text>
              <uni-icons style="line-height: 30px;" color="#b5b5b5" type="right" size="13"></uni-icons>
            </view>

            <!-- <view class="" v-else>
              <input style="" v-model="appointment_time" placeholder="选择时间" />
              <uni-icons color="#b5b5b5" type="right" size="13"></uni-icons>
            </view> -->


            <view v-else class="" style="">
              <text>选择时间</text>
              <uni-icons color="#b5b5b5" type="right" size="13"></uni-icons>
            </view>



          </view>


        </view>

        <view class="">
          <text style="color: #f19500;font-size: 12px;">因配送订单较多，送达时间可能有波动</text>
        </view>
      </view>
    </view>



    <!-- 没有数据的时候触发 -->

    <view v-else class="select" style="  background-color: white;padding-bottom: 20px;align-items: center;">
      <view class="" style="padding-left: 10px;">
        <view class="" @click="selects"
          style="display: flex;padding-top: 20px;padding-bottom: 15px;justify-content: space-between">
          <text style="color: #f19500;font-family: 'Arial Narrow';font-weight: bold;">选择收货地址</text>
          <view class="" style="width: 30px;">
            <uni-icons color="#b5b5b5" type="right" size="13" style=""></uni-icons>
          </view>

        </view>


        <view class="" style="display: flex;justify-content: space-between;">
          <text style="font-weight: bold;font-size: 16px;">立即送出</text>

          <view class="" style="padding-left: 48%;">

            <text style=" color: #f19500;font-size: 12px;">11:55-12:10送达</text>

          </view>
          <view class="" style="width: 30px;">
            <uni-icons color="#b5b5b5" type="right" size="13"></uni-icons>
          </view>
        </view>



      </view>
    </view>



    <!-- 时间选择弹窗-->
    <uni-popup ref="address" type="popup">
      <view class="" style="height: 250px;z-index: 999;">

        <view class="" style="background-color: white;border-radius: 10px;">



          <!-- 头部-->

          <view style="display: flex;justify-content: space-between;padding-top: 10px;">

            <text style=""> </text>
            <text style="font-weight: bold;">选择预计送达时间</text>
            <view class="" style="margin-top:-7px" @click="close">
              <text style="font-size: 25px;color: #ccc;"> ×</text>
            </view>
          </view>






          <view class="" style="padding-top: 20px;display: flex;justify-content: space-between;">
            <!-- 正文左边-->
            <view class="">
              <text>今天({{dayOfWeek}})</text>
            </view>


            <!-- 正文右边-->
            <view class="" style=" margin-left: -20%;">
              <scroll-view scroll-y :style="{height: 200 + 'px'}" :scroll-top="scrollTop">
                <view v-for="(item,index) in timers" :key="index" style="">

                  <view class="" style="border-bottom:1px solid #e5e5e5;padding-bottom: 10px;padding-top: 10px;">
                    <view :class="onselect===index?'onselect':''" @click="onselects(index)">
                      <text>{{item}}</text>
                      <text>(配送费约￥2.2)</text>
                    </view>
                  </view>




                </view>
              </scroll-view>

            </view>
            <view class="">
              <!--   <text>今天(周一)</text> -->
            </view>



          </view>





        </view>
      </view>
    </uni-popup>


  </view>
</template>

<script>
  import
  EventBus
  from '@/utils/EventBus.js';
  import {
    getdefault
  } from '@/api/address.js'
  export default {
    /* name: 'my-mySelectaddress', */
    data() {
      return {
        addressdata: '',
        time: '',
        active: 0,
        appointment_time: '', //预约时间
        scrollTop: 0,
        onselect: '',
        timers: [],
        speed: '', //当前时间
        dayOfWeek: '' //星期几
      };
    },
    created() {

      this.initaddress()
      this.gettime()


    },
    mounted() {


      this.getweek()
      this.Active()
    },

    methods: {
      //查询默认收货地址
      async initaddress() {
        const res = await getdefault()
        this.addressdata = res.data
        console.log(res.data, "res.data")
      },
      //选择收货地址
      selects() {
        uni.navigateTo({
          url: '/subpkg/address/address',

        })

      },
      Active() {
        this.active = 1
        this.appointment_time = ''
        EventBus.$emit('someEvent', this.addressdata, this.time, this.appointment_time)
      },
      timesend() {
        this.$refs.address.open("bottom")

      },

      gettime() {

        // 获取当前时间
        const now = new Date();
        // 获取小时（24小时制）
        this.speed = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0')
        now.setMinutes(now.getMinutes() + 30);
        const hours = now.getHours().toString().padStart(2, '0'); // 获取小时
        const minutes = now.getMinutes().toString().padStart(2, '0'); // 获取分钟
        this.time = hours + ':' + minutes



        for (let i = now.getHours(); i <= 24; i++) {

          if (now.getHours() === 23) {
            const hourss = (now.getHours()).toString().padStart(2, '0'); // 获取小时

            const minutess = now.getMinutes().toString().padStart(2, '0'); // 获取分钟
            now.setMinutes(now.getMinutes() + 30);
            this.timers.push(hourss + ':' + minutess)
          } else if (now.getHours() === 0) {
            const hourss = (now.getHours()).toString().padStart(2, '0'); // 获取小时

            const minutess = now.getMinutes().toString().padStart(2, '0'); // 获取分钟
            now.setMinutes(now.getMinutes() + 30);
            this.timers.push(hourss + ':' + minutess)
          } else {
            const hourss = (now.getHours()).toString().padStart(2, '0'); // 获取小时

            const minutess = now.getMinutes().toString().padStart(2, '0'); // 获取分钟
            now.setMinutes(now.getMinutes() + 30);
            this.timers.push(hourss + ':' + minutess)
          }


        }
        //  console.log(this.timers, "this.timers")


      },
      onselects(index) {
        this.onselect = index
        this.appointment_time = this.timers[index]
        this.active = 0
        EventBus.$emit('someEvent', this.addressdata, this.time, this.appointment_time)
      },
      close() {
        this.$refs.address.close("bottom")
      },
      //获取星期
      getweek() {
        let date = new Date();
        let daysOfWeeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        //      this.dayOfWeek = daysOfWeeks[date.getDay()]; // 获取星期几的名称
        const week = daysOfWeeks[date.getDay()]
        this.dayOfWeek = week

      }

    }
  }
</script>

<style lang="scss" scoped>
  .active {

    display: flex;
    justify-content: space-between;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    width: 95%;
    height: 40px;
    align-items: center;
    border: 1px solid #ffee2b;

    color: #ff5500;
    background-color: #f1ebc9;

  }

  .send {
    display: flex;
    justify-content: space-between;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    width: 95%;
    height: 40px;
    align-items: center;
  }

  .time {
    display: flex;
    justify-content: space-between;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    width: 95%;
    height: 40px;
    align-items: center;
    margin-top: 5px;
  }

  .times {
    display: flex;
    justify-content: space-between;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    width: 95%;
    height: 40px;
    align-items: center;
    margin-top: 5px;
    color: #ff5500;
    background-color: #f1ebc9;
  }

  .onselect {
    border: 1px solid #ffee2b;
    color: #ffee2b;
  }
</style>